<template>
  <view>
    <!-- 我的项目模块 -->
    <view class="module">
      <view class="title" v-if="projects">我的项目</view>
      <view class="project-info" v-for="(item,idx) in projects" :key="idx+9454">
        <view class="project-name">{{ item.name }}</view>
        <view class="team-member-list">
			<view>成员：</view>
         <view class="team-member" v-for="(member, index) in memberList[idx]" :key="index*4+4857">
		  {{ member.name }}
		  </view>
        </view>
    </view>
	</view>

    <!-- 团队成员模块 -->
   <view class="module">
      <view class="title">团队成员</view>
      <view >
        <view  v-for="(item, index) in memberList" :key="index+12364">
		<view class="team-member" v-for="(person,idx) in item" :key="idx+72367">
			<text style="margin-right: 2px;">{{person.name}} </text>  <text style="margin-left: 2px;"> 电话 : {{person.tel}} </text>
			<br/>
		</view>
		</view>
      </view>
    </view>

    <!-- 项目进度模块 -->
   <view class="module">
      <view class="title">项目进度</view>
		<view v-for="(item,idx) in projects" :key="idx+84757">
			<text>项目名：{{item.name}} </text> 
			<text>状态：{{item.status}}</text>
		</view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 50,
	  Data:null,
	  projects:[],
	  memberList:[]
    };
  },
  mounted(){
	  let that = this 
	uni.getStorage({
		key:'info',
		success: (res) => {
			let info = JSON.parse(res.data)
			let user_id = info.user_id
			uni.request({
				url:'http://localhost:8085/api/project_user/getperson',
				header : {'content-type':'application/x-www-form-urlencoded'},
				method:'GET',
				data:{user_id:info.user_id},
				success:function(res){
					let response = res.data.data 
					console.log(response)
					that.projects =  response.projectList 
					that.memberList = response.employees 
					
				}
			})
			
		}
	})
	  
	  
  }
};
</script>

<style>
.module {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.project-info {
  display: flex;
  flex-direction: column;
  
}

.project-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.team-members {
  font-size: 14px;
  color: #666;
}

.team-member-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.team-member {
  padding: 4px 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 14px;
}

.progress-bar {
  height: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 10px;
}

.progress {
  height: 10px;
  background-color: #007aff;
}

.progress-label {
  font-size: 14px;
  margin-top: 10px;
  text-align: right;
}
</style>